<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>$Title$</title>
</head>

<style type="text/css">

    .popDiv {
        display: none;
        background-color: white;
        z-index: 11;
        width: 30vw;
        height: 80vh;
        position: fixed;
        top: 0;
        right: 0;
        left: 10vw;
        bottom: 0;
        margin: auto;
    }
    .popDiv li{
        list-style-type: none;
    }
    /* 关闭按钮样式 */
    .popDiv .close a {
        text-decoration: none;
        color: #2D2C3B;
    }

    /* 弹出界面的关闭按钮 */
    .popDiv .close {
        text-align: right;
        margin-right: 15px;
        background-color: #F8F8F8;
        font-size: 16px;
    }

    .addGoods {
        width: 50px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        font-size: 16px;
        background-color: aqua;
        margin: 20px 0 20px 0;
    }

    .addGoods:hover {
        cursor: pointer;
    }

    form{
        font-size: 20px;
    }
    form input{
        width: 300px;
        padding: 7px;
        margin-top: 2px;
    }
    .popDiv input{
        width: 70%;
        margin-left: 2vw;
    }
    select{
        margin-left: 2vw;
        padding: 7px;
        width: 70%;
        margin-top: 5px;
    }
    table{
        text-align: center;
        text-after-overflow: hidden;
    }
    table td{
        width: 80px;
        height: 30px;
    }
</style>

<script src="/static/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">

    $(function () {
        $("#closePop").click(function () {
            $("#popDiv").css('display', 'none');
        })
        $("#popLayer").click(function () {
            $("#popDiv").css('display', 'block');
        })

        $("#typeSelect").bind("change", function () {
            var id = $("#typeSelect").val();
            $.ajax({
                type: "post",
                url: "/type/getName?fid=" + id,
                dataType: "json",
                success: function (data) {
                    console.log(data);

                    console.log(data[0].id)

                    //清空下拉框
                    $("#goodsName").empty();

                    for(var i = 0;i<=data.length;i++){
                        $("#goodsName").append("<option value='"+data[i].id+"'>"+data[i].typeName+"</option>");
                    }

                },
                error: function (data){
                    console.log(data);
                    alert("选个类型8");
                }
            })
        })


    });
</script>
<body>

<h1>新增武器箱</h1>
<form action="${pageContext.request.contextPath}/goods/addBox" method="post" enctype="multipart/form-data">
    饰品箱名称:<input type="text" name="boxName"/><br/>
    饰品箱封面:<input type="file" name="file"/><br/>

    <c:if test="${not empty sessionScope.waitAddGoods}">
        <table>
            <tr>
                <td>序号</td>
                <td>涂装名称</td>
                <td>品质</td>
                <td>类别</td>
                <td>类型</td>
                <td>名称</td>
                <td>描述</td>
                <td>图片</td>
            </tr>
            <c:forEach items="${sessionScope.waitAddGoods}" var="g" varStatus="s">
                <tr>
                    <td>${s.count}</td>
                    <td>${g.coating}</td>
                    <td>${g.category}</td>
                    <td>${g.quality}</td>
                    <td>${g.goodsType.typeName}</td>
                    <td>${g.goodsType.name}</td>
                    <td>${g.description}</td>
                    <td><a href="${g.converPath}">点击查看</a></td>
                </tr>
            </c:forEach>
        </table>
    </c:if>


    <div class="addGoods" id="popLayer">+</div>

    <input type="submit" value="确定">
</form>

<div id="popDiv" class="popDiv">
    <div class="close">
        <a href="javascript:void(0)" id="closePop" class="closePop">关闭</a>
    </div>
    <form action="${pageContext.request.contextPath}/goods/addGoodsInBox" method="post" enctype="multipart/form-data">
        <center><b>添加饰品</b></center>
        <ul>
            <li><input type="text" name="coating" placeholder="涂装名称"></li>
            <li>
                <select name="quality">
                    <option>选择品质</option>
                    <option value="违禁">违禁</option>
                    <option value="隐秘">隐秘</option>
                    <option value="非凡">非凡</option>
                    <option value="保密">保密</option>
                    <option value="奇异">奇异</option>
                    <option value="受限">受限</option>
                    <option value="卓越">卓越</option>
                    <option value="军规级">军规级</option>
                    <option value="高级">高级</option>
                    <option value="工业级">工业级</option>
                    <option value="消费级">消费级</option>
                    <option value="普通级">普通级</option>
                </select>
            </li>
            <li>
                <select name="category">
                    <option>类别</option>
                    <option value="普通">普通</option>
                    <option value="纪念品">纪念品</option>
                    <option value="StatTrak™">StatTrak™</option>
                    <option value="★">★</option>
                    <option value="★ StatTrak™">★ StatTrak™</option>
                </select>
            </li>
            <li>
                <select id="typeSelect">
                    <option>类型</option>
                    <c:forEach items="${sessionScope.typeList}" var="type">
                        <option value="${type.id}">${type.typeName}</option>
                    </c:forEach>
                </select>
                <select name="goodsType.id" id="goodsName">
                    <option>武器名称</option>
                </select>
            </li>
            <li>
                <input type="text" name="description" placeholder="饰品简述">
            </li>
            <li>
               <input type="file" name="file">
            </li>
        </ul>
        <input type="submit" value="添加">
    </form>
</div>

</body>
</html>
